<template>
	<div class="list-content p-l-r-12">
		
		<div class="f-row">
			<div class="flex-1 align-center">
				<van-checkbox v-model="listchecked" shape checked-color="#07c160" icon-size="18"></van-checkbox>
			</div>
			<div class="list-img align-center">
				<img src="../../assets/img/banner6.jpg"/>
			</div>
			<div class="list-name">
				<p>轻型款鸵鸟枕【红色】</p>
				<p>她让我们舒适，让我们温暖，也在一直关照着我们。陪我们穿过人潮人海、经...</p>
				<p>120.00</p>
			</div>
			<div class="flex-1 align-center just-right">
				<van-icon name="delete" size="22" color='#F14242'/>
			</div>
		</div>
		<div class="stepper">
			<van-stepper v-model="stepperVal" min="1" max="10" integer input-width="40px" button-size="30px"/>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				listchecked : 'ture',
				stepperVal : ''
			}
		}
	}
</script>

<style scoped lang="less">
	.list-content{
			background-color: #fff;	
			margin-top: 10px;
			padding: 10px 12px;
			box-shadow: 0px 4px 4px #F2EFEF;
		
			.align-center{
				display: flex;
				align-items: center;
			}
			
			.list-img{
				flex: 2;
				img{
					width:100%;
					vertical-align: bottom;
				}
			}
			
			.list-name{
				width:64%;
				font-size: 14px;
				p{
					line-height: 30px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0px 10px;
				}
			}
			
			.just-right{
				justify-content: flex-end;
			}
			
			.stepper{
				text-align: right;
			}
	}
</style>
